<template>
  <div class="Control">
    <a-form-model layout="inline" :model="pages" :colon="false">
      <!--      <a-form-model-item label="行政区">-->
      <!--        <a-input v-model="formInline.user" placeholder="请输入行政区"></a-input>-->
      <!--      </a-form-model-item>-->
      <a-form-model-item label="企业名称">
        <a-input v-model="pages.searchKey" placeholder="请输入企业名称" allowClear/>
      </a-form-model-item>
      <a-form-model-item style="float: right">
        <a-button type="primary" @click="searchSub">搜索</a-button>
      </a-form-model-item>
    </a-form-model>
    <div class="table-class">
      <my-table style="height: 100%" :columns="columns" :data-source="tableData" :scroll="{x: 1500,y:'66vh'}"
               :rowKey="record=> record.id"
               :pagination="{itemRender:itemRender,onChange:pagechangeFn,showTotal:total => `共 ${total} 条记录`,total:total,defaultPageSize:pages.pageSize,defaultCurrent:pages.currentPage}">
        <div slot="action" slot-scope="text,record" class="action-class" @click="openModal(record)">工作参数</div>
      </my-table>
    </div>
    <Pagination ref="Pagination" :PaginationData="PaginationData"></Pagination>
  </div>
</template>

<script>
import moment from "moment";
import Pagination from "@/views/air/components/Parameters";

const columns = [
  {title: '行政区', width: 150, dataIndex: 'areaName', align: 'center'},
  {title: '企业名称', dataIndex: 'companyName', align: 'center'},
  {title: '排口名称', dataIndex: 'monitorName', width: 150, align: 'center'},
  {title: '监测因子', dataIndex: 'monitorFactorsName', width: 150, align: 'center'},
  {title: '浓度', dataIndex: 'rtd', width: 80, align: 'center'},
  {title: '原始信号值', dataIndex: 'originalSignal', width: 150, align: 'center'},
  {title: '在线仪状态', dataIndex: 'onlineStatus', width: 150, align: 'center'},
  {title: '在线仪报警', dataIndex: 'warningStatus', width: 150, align: 'center'},
  {title: '参数最新上传', dataIndex: 'datatime', align: 'center'},
  {title: '操作', align: 'center', width: 100, scopedSlots: {customRender: 'action'},},
];
export default {
  name: "Control.vue",
  props:{
monitorTypeList:{
  type:Array,
  request:true
}
  },
  components: {
    Pagination,
  },
  data() {
    return {
      columns,
      tableData: [],
      PaginationData: {},
      pages: {
        currentPage: 1,
        pageSize: 10,
        searchKey: "",
        monitorTypeList:[]
      },
      total: 20,
    }
  },
  methods: {
    searchSub() {
      console.log(this.pages)
      this.pages.currentPage = 1;
      this.getData();
    },
    openModal(record) {
      this.$refs.Pagination.parameters = true;
      this.PaginationData = record;
      this.$nextTick(() => {
        this.$refs.Pagination.getWorkInfoData();
      })

    },
    // 分页方法
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a>上一页</a>;
      } else if (type === "next") {
        return <a>下一页</a>;
      }
      return originalElement;
    },
    pagechangeFn(page) {
      this.pages.currentPage = page;
      this.getData()
      console.log(page)
    },
    // 分页数据获取方法
    getData() {
      this.pages.monitorTypeList = this.monitorTypeList;
      this.$api.realTimeControlFind(this.pages).then(res => {
        console.log(res.data)
        if (res.data.code == 0) {
          res.data.data.records.forEach(v => {
            v.datatime = v.datatime ? moment(v.datatime).format("YYYY/MM/DD HH:mm:ss") : ""
          })
          this.tableData = res.data.data.records;
          this.total = res.data.data.total;
        }
      })
    }
  },
  created() {
  },
  mounted() {
    this.getData()
  }
}
</script>

<style scoped lang="scss">
.Control {
  width: 100%;
  height: 100%;
  padding: 1%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .table-class {
    width: 100%;
    height: 94%;

    .action-class {
      color: #1890ff;
      cursor: pointer;
    }

    ::v-deep .ant-spin-nested-loading, ::v-deep .ant-spin-container,::v-deep .ant-table-wrapper{
      height: 100%;
    }

    ::v-deep .ant-table-pagination.ant-pagination {
      position: absolute;
      bottom: 0;
      right: 0;
    }

  }
}
</style>